So, my first question to you is the following: When you need to add a form to an app, what are the most important UX factors you need to keep in mind to make it work for all your users?
Smuela Jacobs: There are some considerations that you need to do, because forms are your main interaction with the users. You’ll want to keep it simple and keep the users informed about whether they are using the form in the right way or maybe submitted, they try to submit something wrong, try to use it in a wrong way. So one of the most important things you have to think about is where you display the error messages and when to display them. First thing, you don’t want the user to get a form full of error messages even before they started writing anything – that’s really bad experience. So, if there are values that are required, wait for the user to try to put something in, to interact with the form and then tell them: “Hey, you forgot to type in this value”.
Another thing is that I see lots of forms where you need to type in your e-mail address and it waits for you to write something. But at the moment you write the first letter, it tells you: “Hey, this is wrong, that’s not a proper e-mail address”. And you need to write the whole address to make the error message go away. I really hate this. So please, please try to give the error message only after the user has finished giving the input. Another really important thing to consider is putting the error messages close to where the error has appeared, close to the input itself, and to be clear about what exactly is wrong and suggest how to improve it. There are other things like disabling the submit button when there is an error and so on. But I think that the validation and the error messages are critical things in our experience when we use forms.
When you want to add a form to an Agular app, what different options does Angular offer to do that?
Smuela Jacobs: Angular comes with two forms modules. The regular one is called the Forms Module, which is template-driven, and the Reactive Forms Module. Behind the scenes, they’re implemented with the same controls and classes. The difference is that you can figure the template-driven forms out through the template, so they’re great for the simple forms where you just have an initial value and one or two validators. You don’t have a lot of logic to do with this form. But once this form gets more complicated and you need it to do more special stuff, when you need more or asynchronous validators, then you’ll want to simplify the code or the template – if you’re still using template-driven forms – may become very, very big, long, and complicated and it will be hard for you to manage it. There are a lot of things that will be imperative. So you want to make it more declarative to understand what is going on in your form. In Reactive Forms in Angular, you generate the whole form in the code declaratively. You manage it all there in the controller or the service; you can generate it according to a model that you have on a server; or it can be generated dynamically according to the data that you have. You can change the value that it has; you can react to changes in the value; you can change the validators while the user uses the form. You can do a lot of stuff and it will be very clear in the code and with just a few directives, you’ll attach it to the template. So it’s much cleaner and much more manageable.
What are the features of the Reactive Forms Module?
Smuela Jacobs: The Reactive Forms Module gives us all the features that you need to manage the form. It gives you everything about the state of the form: whether it’s valid, whether the control has been touched, whether it has been submitted, and so on. It manages the errors for you; it gives you a simple option to give validators and asynchronous validators; it gives you everything out of the box. In addition, it gives you a very simple way to react to changes. So instead of being event-based – where you can react to one event at a time and then you might get conflicting in events – it gives you a stream of these events, using observables. So you can do things on the form whenever the stream gives you a value. So it is very simple to manage things this way. For example in the workshop, I show the form where you can configure a room with seating. So this room has rows and each row has a certain number of seats and there is an input on the side for every row, telling how many seats there are. When the user changes this number, the form has to automatically add seats or reduce them. But we don’t want to act immediately on the change of the input, because maybe the user tried to write a certain value but there was a mistake and the user corrected it really quickly and we don’t want to act on too many events on the stream. So we want to use things like debounce and we want to get a distinct value. So if the user has edited this number but then very quickly edits it back to the number that was there before, then we don’t want to do any action.
So, when listening to the value changes – this is a member that you have on form controls – this member is an observable. Because it is an observable, you can pipe to its different operators before you subscribe to it. So you pipe the debalance operator and you pipe the distinct until changed. It’s much simpler to manage the flow of data this way and eventually react to what is really important. So this is a great thing that Reactive Forms in Angular gives us – together of course with the RxJS library.
Is there anything that you need to keep in mind if you want to create mobile-friendly forms?
Smuela Jacobs: Well, when it comes to mobile-friendly forms, there are two things that you need to think about. One is the design: This doesn’t have to do a lot with Angular itself and the Angular forms, but there are of course libraries that give you components that are suitable for both a large screen and a mobile view. Another thing that you’ll want to consider is the data usage. If, for example, you have asynchronous validation then you don’t want it to happen too many times because it costs data and you don’t want to pass real large data over the network; so you have to consider these things. But as far as it comes to the user experience with Reactive Forms, I believe you have to consider the same things and the Reactive Forms Module will be used in the same way.
What are the differences between the approach of the forms in Agular and the ones used in React?
Smuela Jacobs: One thing we have to make clear first of all is that React isn’t reactive by nature. Even though it sounds like it, you need to add libraries (for example RxJS) to really use reactive programing with React. If you want to use forms in React, you actually need to do something that wasn’t supposed to happen in React, but there is no other option. This is an exception, where you really need to access DOM elements directly and do DOM manipulations. React doesn’t come with the build-in libraries form. You need to either implement it yourself or choose a third party’s library for that. The Forms Module in Angular comes from the Angular team, from the Angular project and they work really hard to make it compatible to Angular and to bring the best experience to the Angular developers. So this is one of the biggest differences that there is.
One last question for you: Is there any practical advice you could give to people who just want to get started with Angular Reactive Forms?
Smuela Jacobs: Yes, of course. First thing, just go and try it out. Start implementing your ideas, start working with it, start playing with it. Angular gives a really great set of tools to really get into this Forms Module really quickly. You can easily discover what the objects that Angular gives you hold inside. You can see how they change, you can log it or probe it in the console in the devtools. The API is really, really easy and in no time you’ll get a lot of work done. So just try it out!
Another thing that I would suggest, really don’t be alarmed about it, is to just go into the source code of Angular. Angular implemented a few form controls and validators that come out of the box. When you look at the code, this is really clean code and there are really good practices there that you can learn from and use when you implement your own controls and your own validators. So don’t be afraid, just go to the Angular-Repository on GitHub and take a look. I really recommend it.
That sounds very promising for new users. So, this was our talk with Shmuela Jacobs at the Angular Days. Thank you for being here.
The following interview was conducted by Julia Martin.
Das Interview führte Julia Martin.
